.article-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    margin-top: 110px;
}

.article-card {
    margin-bottom: 20px;
    width: 83%;
    height: 120px;
    text-align: left;
    /* 添加这一行 */
    border-radius: 5px;
}

.title {
    font-size: 18px;
    color: black;
}

.title:hover {
    color: rgba(0, 170, 255, 0.685);
    /* 鼠标悬停时的颜色 */
}

.notice-content {
    display: -webkit-box;
    /* 旧版 Safari 和 Chrome 兼容性 */
    display: flex;
    /* 使用 Flexbox */
    flex-direction: column;
    /* 垂直方向排列 */
    overflow: hidden;
    /* 隐藏超出部分 */
    text-overflow: ellipsis;
    /* 超出部分显示省略号 */
    font-size: 14px;
    /* 字体大小 */
    color: #666;
    /* 文本颜色 */
    line-clamp: 2;
    /* 限制为 2 行 */
    -webkit-line-clamp: 2;
    /* Safari 兼容性 */
    max-height: 3.8em;
    /* 设定最大高度以限制行数，2行的高度一般约为2.4em */
    line-height: 1.8;
}

.header {
    width: 80%;
    float: left;
}

.date {
    float: left;
    width: 20%;
    /* 使日期占满宽度 */
    font-size: 17px;
    /* 日期字体大小 */
    color: #999;
    /* 日期颜色 */
    height: 64px;
    display: flex;
    /* 使用 Flexbox */
    justify-content: center;
    /* 水平居中 */
    align-items: center;
    /* 垂直居中 */
}
.style{
    padding: 5px;
}
.daohang{
    width: 83%;
    text-align: left;
    border-bottom: 1px solid #00000017;
    background: url(../img/icon-location-blue.png) no-repeat 0 8px;
    background-position: 0px,-12px; /* 调整位置 */
    padding-left: 20px;
}
.daohang > a{
    color: #0000004d;
}
.daohang > span{
    color: #0000004d;
}
button{
    margin-left: 73%; 
    margin-bottom: 15px;
}
.article-card:hover {
    background-color: rgba(0, 0, 0, 0); /* 背景变暗，调整透明度 */
}
.pagination{
    margin-right: 73%; 
}